.password-strength {
  width: 100%;
  font-size: 0.9em;
}

.password-strength__title,
.password-strength__bar {
  margin-bottom: 10px;
}

.password-strength__bar {
  width: 100%;
  height: 5px;
  position: relative;
  box-shadow: inset 0 0 0 1px $cool-silver;

  .password-strength__indicator {
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: 0.25s;
  }

  &.password-strength__bar--score-0 {
    .password-strength__indicator {
      width: 1%;
      background-color: $cool-red;
    }
  }

  &.password-strength__bar--score-1 {
    .password-strength__indicator {
      width: 25%;
      background-color: $cool-red;
    }
  }
  &.password-strength__bar--score-2 {
    .password-strength__indicator {
      width: 50%;
      background-color: $cool-orange;
    }
  }
  &.password-strength__bar--score-3 {
    .password-strength__indicator {
      width: 75%;
      background-color: $warm-green;
    }
  }
  &.password-strength__bar--score-4 {
    .password-strength__indicator {
      width: 100%;
      background-color: $cool-blue;
    }
  }
}

.password-strength__message {
  &.password-strength__message--warning {
    color: $cool-red;
  }
}
